<!--
 * @Date: 2025-07-19 01:40:10
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-09-24 19:26:18
 * @FilePath: /admin-vue/src/views/admin/abort/index.vue
-->
<script setup lang="ts">
import { computed } from 'vue'
import pkg from '~/package.json'

interface PkgJson {
  name: string
  version: string
  dependencies: PkgVersionInfo[]
  devDependencies: PkgVersionInfo[]
}

interface PkgVersionInfo {
  name: string
  version: string
}

const { name, version, dependencies, devDependencies } = pkg

function transformVersionData(tuple: [string, string]): PkgVersionInfo {
  const [$name, $version] = tuple
  return {
    name: $name,
    version: $version,
  }
}

const pkgJson: PkgJson = {
  name,
  version,
  dependencies: Object.entries(dependencies).map((item) => transformVersionData(item)),
  devDependencies: Object.entries(devDependencies).map((item) => transformVersionData(item)),
}
</script>

<template>
  <n-scrollbar>
    <NSpace vertical :size="16">
      <NCard title="生产依赖" :bordered="false" size="small" segmented class="card-wrapper">
        <NDescriptions label-placement="left" bordered size="small" :column="2">
          <NDescriptionsItem
            v-for="item in pkgJson.dependencies"
            :key="item.name"
            :label="item.name"
          >
            {{ item.version }}
          </NDescriptionsItem>
        </NDescriptions>
      </NCard>
      <NCard title="开发依赖" :bordered="false" size="small" segmented class="card-wrapper">
        <NDescriptions label-placement="left" bordered size="small" :column="2">
          <NDescriptionsItem
            v-for="item in pkgJson.devDependencies"
            :key="item.name"
            :label="item.name"
          >
            {{ item.version }}
          </NDescriptionsItem>
        </NDescriptions>
      </NCard>
    </NSpace>
  </n-scrollbar>
</template>

<style scoped></style>
